<template>
  <el-card>
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">病人信息管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>病人信息视图</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-alert
        title="温馨提示"
        type="info"
        description="请先在选择框中选择用户方可查看用户健康信息"
        show-icon
        :closable="false"
      >
      </el-alert>
    </el-row>
    <el-row>
      <el-select
        v-model="catID"
        filterable
        placeholder="请选择病人姓名"
        @change="selectChange()"
      >
        <el-option
          v-for="item in informasionList"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        >
        </el-option>
      </el-select>
    </el-row>
    <div class="charsBox" v-show="charShow">
      <div class="charDom">
        <ve-line :data="temperatureChartData" width="500px"></ve-line>
      </div>
      <div class="charDom">
        <ve-line :data="bloodPressureCharDate" width="500px"></ve-line>
      </div>
      <div class="charDom">
        <ve-line :data="bloodSurgerCharDate" width="500px"></ve-line>
      </div>
    </div>
  </el-card>
</template>

<script>
export default {
  data () {
    // this.chartSettings = {}
    // this.chartSettings2 = {}
    // this.chartSettings3 = {}
    return {
      informasionList: [],
      catID: '',
      temperatureChartData: {},
      bloodPressureCharDate: {},
      bloodSurgerCharDate: {},
      nowID: '',
      charShow: false,
      doctorID: window.sessionStorage.getItem('doctorID')
    }
  },
  created () {
    this.getinformationList()
  },
  methods: {
    async getinformationList () {
      await this.$http
        .get('/api/profile/patientList/' + this.doctorID, { params: this.queryInfo })
        .then((res) => {
          this.informasionList = res.data.information
        })
    },
    selectChange () {
      this.$http.get('/api/profile/patientinfo/' + this.catID).then((res) => {
        if (res.status !== 200) {
          return this.$message.error('获取信息失败')
        }
        this.temperatureChartData = res.data.charDate.temperatureChartData
        this.bloodPressureCharDate = res.data.charDate.bloodPressureCharDate
        this.bloodSurgerCharDate = res.data.charDate.bloodSurgerCharDate
        this.charShow = true
      })
    }
  },
  mounted () {}
}
</script>

<style scoped>
.el-select {
  margin-top: 20px;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
#echars1 {
  width: 50%;
  height: 500px;
  float: left;
}
.charsBox {
  width: 100%;
  height: auto;
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}
.charDom {
  width: 50%;
}
</style>
